<template>
  <div class="box">
    <h2>评论</h2>
    <el-tag closable type="info" @close="clearRely" v-if="mydata"
      >回复 @{{ mydata.nickname }}</el-tag
    >
    <textarea
      v-model="content"
      placeholder="说点什么吧...."
      rows="3"
    ></textarea>
    <div class="uploadImg">
      <el-upload
        :auto-upload="false"
        :on-change="beforeUpload"
        :action="$axios.defaults.baseURL + '/upload'"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <el-button
        @click="submitComment"
        type="primary"
        class="submintBtn"
        size="mini"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  props: ['data'],
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      pics: [],
      content: '',
      // 文章id
      post: this.$route.query.id,
      flag: false,
      mydata: this.data,
    }
  },
  methods: {
    // 删除图片
    handleRemove(file, fileList) {
      const index = this.pics.findIndex((x) => {
        return x.uid === file.uid
      })
      this.pics.splice(index, 1)
    },
    // 点击查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传图片
    beforeUpload(files, fileList) {
      this.$nextTick(() => {
        var formData = new FormData()
        formData.append('files', files.raw)
        this.$axios({
          url: '/upload',
          method: 'POST',
          data: formData,
        }).then((res) => {
          // console.log(res)
          this.pics.push({ ...res.data[0], uid: files.uid })
        })
      })
    },
    submitComment() {
      let data = {
        pics: this.pics,
        content: this.content,
        post: this.post,
      }
      if (this.mydata) {
        data = {
          ...data,
          follow: this.mydata.id,
        }
      }

      this.$axios({
        method: 'POST',
        url: '/comments',
        headers: {
          Authorization: 'Bearer ' + this.$store.state.user.userinfo.token,
        },
        data,
      }).then((res) => {
        // console.log(res)
        if (res.data.message === '提交成功') {
          //评论成功
          this.$message.success('评论成功 ')
          // 刷新评论列表
          this.content = ''
          this.$emit('reloadCommentList')
        }
      })
    },
    clearRely() {
      this.mydata = null
    },
  },
  watch: {
    data() {
      this.mydata = this.data
    },
  },
}
</script>
<style lang="less" scoped>
.el-tag {
  margin-bottom: 10px;
}
* {
  box-sizing: border-box;
}
.box {
  width: 100%;
}
h2 {
  font-size: 20px;
  font-weight: 400;
  height: 45px;
}
textarea {
  outline: none;
  border-radius: 5px;
  border: 1px solid #ddd;
  resize: none;
  width: 100%;
  padding: 10px 20px;
}
// 上传按钮的大小
.uploadImg {
  margin-top: 10px;
  height: 100px;
  position: relative;
  /deep/ .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    line-height: 100px;
    vertical-align: top;
  }
  .submintBtn {
    position: absolute;
    right: 0;
    top: 0;
  }
}
// 设置上传图片的大小
/deep/ .el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>